<template>
    <el-dialog class="base-dialog" v-bind="$attrs">
        <!--遍历插槽列表，将使用到的插槽传递到组件中-->
        <template v-for="(_, name) in $slots" :key="name" #[name]="scopedData">
            <slot :name="name" v-bind="scopedData"></slot>
        </template>
        <template v-if="!$slots.footer && showFooter?.toString() !== 'false'" #footer>
            <el-button @click="$emit('close')">{{ closeText }}</el-button>
            <el-button v-if="showReset" @click="$emit('reset')">{{ resetText }}</el-button>
            <el-button v-if="showSubmit" type="primary" @click="$emit('submit')">{{ submitText }}</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseDialog
 * @Description 对话框组件
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example
 */
interface BaseDialogProps {
    showFooter?: boolean | string // 是否隐藏底部按钮
    showClose?: boolean // 是否显示取消按钮，默认显示
    showReset?: boolean // 是否显示重置按钮，默认不显示
    showSubmit?: boolean // 是否显示确认按钮，默认显示
    closeText?: string // 关闭按钮的文字
    resetText?: string // 重置按钮的文字
    submitText?: string // 提交按钮的文字
}

withDefaults(defineProps<BaseDialogProps>(), {
    showFooter: true,
    showClose: true,
    showReset: false,
    showSubmit: true,
    closeText: '关闭',
    resetText: '重置',
    submitText: '确定',
})
defineEmits(['close', 'reset', 'submit'])
</script>

<style lang="scss"></style>
